<!-- 备注组件 -->

<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="800px"
    @close="handleClose"
    class="dialog-remark"
  >
    <el-form
      ref="remarkForm"
      :model="remarkForm"
      :rules="remarkRules"
      label-width="80px"
    >
      <!-- 备注输入框 -->
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="remarkForm.remark"
          type="textarea"
          :rows="4"
          placeholder="请输入备注内容"
          style="width: 100%"
        ></el-input>
      </el-form-item>

      <!-- 备注历史记录 -->
      <el-form-item label="备注历史">
        <el-table
          :data="remarkHistory"
          border
          style="width: 100%"
          :show-header="true"
          max-height="300"
        >
          <el-table-column
            prop="time"
            label="时间"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="operator"
            label="备注人"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="content"
            label="备注"
            min-width="300"
          ></el-table-column>
        </el-table>
        <div v-if="remarkHistory.length === 0" class="no-history">
          暂无备注历史记录
        </div>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="submitRemark">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getRemarksByParams,
  listRemarksByParams,
} from "@/api/training/remarks";
export default {
  name: "PaymentRemarks",
  // 父组件可传入的参数
  props: {
    // 控制对话框显示/隐藏（必传）
    visible: {
      type: Boolean,
      default: false,
      required: true,
    },
    // 对话框标题（可选，默认"备注"）
    title: {
      type: String,
      default: "备注",
    },
    // 业务ID（必传，用于关联备注记录）
    businessId: {
      type: [String, Number],
      required: true,
    },
    // 初始备注内容（可选）
    initialRemark: {
      type: String,
      default: "",
    },
    remarkTempId: {
      type: [String, Number],
      default: "",
    },
    // 最大备注长度（可选，默认500）
    maxLength: {
      type: Number,
      default: 500,
    },
  },
  data() {
    return {
      // 备注表单数据
      remarkForm: {
        remark: "", // 使用父组件传入的初始值
      },
      // 备注历史记录（内部维护）
      remarkHistory: [],
    };
  },
  computed: {
    // 动态生成验证规则（使用父组件传入的maxLength）
    remarkRules() {
      return {
        remark: [
          { required: true, message: "请输入备注内容", trigger: "blur" },
          {
            max: this.maxLength,
            message: `备注内容不能超过${this.maxLength}个字符`,
            trigger: "blur",
          },
        ],
      };
    },
  },
  watch: {
    // 当对话框显示状态变化时
    visible(val) {
      if (val) {
        // 显示时加载历史记录
        this.loadRemarkHistory();
        // 重置表单为初始值
        this.remarkForm.remark = this.initialRemark;
      }
    },
    // 监听父组件传入的初始备注变化
    initialRemark(val) {
      this.remarkForm.remark = val;
    },
  },
  methods: {
    // 加载备注历史记录
    async loadRemarkHistory() {
      try {
        // 获取该报名的备注历史
        var remarkListQuery = {
          foreignId: this.remarkTempId,
          remarkType: "1",
        };
        listRemarksByParams(remarkListQuery).then((response) => {
          // 将返回的数据赋值给remarkHistory，如果为空则使用默认值
          if (response.rows.length > 0) {
            // 根据实际返回的数据结构进行映射
            this.remarkHistory = response.rows.map((item) => {
              return {
                time: item.createTime || "",
                operator: item.createBy || "",
                content: item.remarks || item.content || "",
              };
            });
          } else {
            // 默认值
            this.remarkHistory = [
              {
                time: "2025-09-09 09:09:09",
                operator: "系统",
                content: "暂无备注记录",
              },
            ];
          }
        });
      } catch (err) {
        this.$message.error("加载备注历史失败：" + err.message);
      }
    },

    // 提交备注
    async submitRemark() {
      try {
        // 表单验证
        await this.$refs.remarkForm.validate();

        // 准备提交数据
        const submitData = {
          foreignId: this.businessId,
          remarks: this.remarkForm.remark,
          remarkType: "1",
          time: new Date().toLocaleString(),
        };

        // 通知父组件处理提交（推荐方式）
        this.$emit("submit", submitData);

        // 提交成功后更新历史记录
        this.remarkHistory.unshift(submitData);
        this.visible = false;
      } catch (err) {
        // 验证失败不处理
      }
    },

    // 关闭对话框时通知父组件
    handleClose() {
      this.$emit("close");
      this.$refs.remarkForm.resetFields();
    },
  },
};
</script>

<style scoped>
.dialog-remark ::v-deep .el-dialog__body {
  padding: 20px;
}

.dialog-remark ::v-deep .el-textarea__inner {
  resize: vertical;
}

.no-history {
  text-align: center;
  padding: 20px;
  color: #999;
  background-color: #f9f9f9;
  border-radius: 4px;
}
</style>
